<script setup lang="ts">
import { ref, defineOptions } from 'vue'
import { user } from '@/store/storeName'
import { showToast } from 'vant';
import { sponsorMoney } from '@/api/getAxios2'
const store = user();


//选择的礼物
const active = ref(0)
const gifts = ref([50, 100, 588, 1888, 8888, 88888])
/**
 * 送钱
 */
const sponsor = () => {
    if (!store.token) {
        showToast("暂未登录")
    } else if (store.user.money < gifts.value[active.value]) {
        showToast("余额不足")
    } else {
        console.log(store.user.money,gifts.value[active.value])
        sponsorMoney(store.token, store.user.money - gifts.value[active.value]).then((res: any) => {
            console.log(res)
            if (res.data === '充值成功') {
                store.sendMoney(store.user.money - gifts.value[active.value])
                showToast("购买成功")
            } else {
                showToast("购买失败")
            }
        })
    }
}
</script>
<template>
    <div id="Sponsor">
        <div class="sponsorTop">推荐打赏</div>
        <div class="gift">
            <div @click="active = 0">
                <img src="@/assets/ReadingView/Sponsor/reward_one.png" alt="">
                <div :class="active === 0 ? 'active' : ''" class="name">鲜花</div>
                <div class="more">50</div>
            </div>
            <div @click="active = 1">
                <img src="@/assets/ReadingView/Sponsor/reward_two.png" alt="">
                <div :class="active === 1 ? 'active' : ''" class="name">平衡车</div>
                <div class="more">100</div>
            </div>
            <div @click="active = 2">
                <img src="@/assets/ReadingView/Sponsor/reward_three.png" alt="">
                <div :class="active === 2 ? 'active' : ''" class="name">跑车</div>
                <div class="more">588</div>
            </div>
            <div @click="active = 3">
                <img src="@/assets/ReadingView/Sponsor/reward_four.png" alt="">
                <div :class="active === 3 ? 'active' : ''" class="name">快艇</div>
                <div class="more">1888</div>
            </div>
            <div @click="active = 4">
                <img src="@/assets/ReadingView/Sponsor/reward_five.png" alt="">
                <div :class="active === 4 ? 'active' : ''" class="name">飞机</div>
                <div class="more">8888</div>
            </div>
            <div @click="active = 5">
                <img src="@/assets/ReadingView/Sponsor/reward_six.png" alt="">
                <div :class="active === 5 ? 'active' : ''" class="name">城堡</div>
                <div class="more">88888</div>
            </div>
        </div>
        <div class="sponsorBottom">
            <div class="left">账户余额: <span>{{ store.user.money }}</span>火星币</div>
            <div class="right" @click="sponsor">送出</div>
        </div>
    </div>
</template>

<style scoped lang='less'>
#Sponsor {
    .sponsorTop {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2vw 0;
        color: #d9646f;
        font-size: 1.25rem;
    }

    .gift {
        width: 100%;
        display: flex;
        padding: 3vw 10vw;
        box-sizing: border-box;
        background-color: #eee;
        flex-wrap: wrap;

        >div {
            width: 20vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 2vw 3vw;

            img {
                width: 25vw;
                display: block;

            }

            .name {
                font-weight: 200;
                font-size: .875rem;
                margin: 1vw 0;
            }

            .more {
                color: gray;
                font-weight: 200;
                font-size: .7rem;
            }

            .active {
                position: relative;
            }

            .active::before {
                content: "";
                width: 20px;
                height: 20px;
                background: url('@/assets/ReadingView/Sponsor/select_single_checkbox_p.png') no-repeat;
                background-size: 20px;
                position: absolute;
                top: -18px;
                left: 4px;
            }
        }
    }

    .sponsorBottom {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 2vw;
        position: relative;
        box-sizing: border-box;

        .left {
            margin: 2vw;

            span {
                color: #d9646f;
            }
        }

        .right {
            position: absolute;
            font-size: 1.125rem;
            top: 0;
            right: 0;
            height: 100%;
            color: white;
            background-color: #d9646f;
            padding: 0 10vw;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }


}
</style>